<template>
	<view class="balance" :style="'height:'+viewHeight+'px;'">
		<view class="money">
			<view class="title">
				<view class="">
					钱包余额（元）
				</view>
				<view class="icon">
					<u-icon :name="isVisual?'eye-fill':'eye-off'" color="#fff" size="28" @click="isVisual = !isVisual"></u-icon>
				</view>
			</view>
			<view class="content">
				<view class="text">
					<view class="price" v-show="isVisual">
						123465.00
					</view>
					<view class="xx" v-show="!isVisual">
						*****
					</view>
				</view>
				<view>
					<view class="btn">
						充值
					</view>
				</view>
			</view>
		</view>
		<money-report :dataList="moneyList" @changeTab="getTabIndex"></money-report>
		<u-empty marginTop="50%" :show="moneyList.length==0" icon='https://file.shopro.top/imgs/empty/empty_goods.png'
			width="260" height="260" text="暂无数据~">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//余额数据
				moneyList: [],
				//可视高度
				viewHeight: 0,
				tabIndex:0,
				isVisual: true
			}
		},
		onReady() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.viewHeight = res.windowHeight
				}
			})
		},
		methods: {
			//获取tab栏的下标
			getTabIndex(index){
				this.tabIndex = index
				console.log(this.tabIndex)
			}
		}
	};
</script>
<style lang="scss">
	.balance{
		background-color: #F6F6F6;
	}
	.money {
		margin: 30rpx;
		padding: 50rpx;
		height: 160rpx;
		overflow: hidden;
		border-radius: 30rpx;
		color: #fff;
		background: linear-gradient(to right, #f37335, #fdc830);

		.title {
			display: flex;
			font-size: 34rpx;
		}

		.content {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			.text {
				.price {
					font-size: 60rpx;
				}

				.xx {
					font-size: 90rpx;
				}
			}

			.btn {
				padding: 14rpx 40rpx;
				border-radius: 40rpx;
				color: #f37335;
				background-color: #fff;
			}
		}
	}
</style>